<!-- 市场拓展页面 -->
<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
      <!-- <el-form-item label="部门" prop="deptId">
        <el-select
          v-model="queryParams.deptId"
          placeholder="请选择部门"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dept in deptList"
            :key="dept.deptId"
            :label="dept.deptName"
            :value="dept.deptId"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item v-hasPermi="['system:marketAccess:user']" label="人员" prop="userId">
        <el-select
          v-model="queryParams.userId"
          placeholder="请选择人员"
          clearable
          filterable
          style="width: 240px"
        >
          <el-option
            v-for="item in userData"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="录入时间">
        <el-date-picker
          v-model="recordDateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="summaryList">
      <!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="用户" prop="userName" />
      <el-table-column
        label="承接合同总额"
        prop="totalMoney"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="合同绩效"
        prop="totalContractMoney"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="回款绩效" prop="totalPaymentMoney" />
      <el-table-column label="成本" width="100" prop="totalCost" />
      <el-table-column
        label="扣除成本后回款应分配"
        width="200"
        prop="paymentCostMoney"
      />
    </el-table>
  </div>
</template>
<script>
import { markettList } from '@/api/settlement/marketAccess'
import { userList } from '@/api/settlement/user'

export default {
  name: 'MarketAccess',
  dicts: ['sys_normal_disable', 'settlement_status'],
  data() {
    return {
      summaryList: [],
      queryParams: {
        userId: null,
        recordDateRange: []
      },
      loading: false,
      userData: [],
      recordDateRange: []
    }
  },
  created() {
    userList().then((res) => {
      this.userData = res.data
    })
    // 初始化查询
    this.queryParams = {
      deptId: null, // 默认不选择部门
      recordDateRange: [] // 默认不选择日期范围
    }
    this.getList()
  },
  methods: {
    getList() {
      this.queryParams = {
        userId: this.queryParams.userId || null,
        recordDateRange: []
      }
      if (this.recordDateRange && this.recordDateRange.length > 0) {
        // 获取开始日期并设置为当天的第一秒
        const startDate = new Date(this.recordDateRange[0]) // 获取开始日期
        startDate.setHours(0, 0, 0, 0) // 设置为当天的第一秒
        this.queryParams.recordDateRange.push(startDate.getTime()) // 转换为时间戳并添加
        if (this.recordDateRange.length > 1) {
          const endDate = new Date(this.recordDateRange[1]) // 获取结束日期
          endDate.setHours(23, 59, 59, 999) // 设置为当天的最后一秒
          this.queryParams.recordDateRange.push(endDate.getTime()) // 转换为时间戳并添加
        }
      }
      console.log(this.queryParams)
      this.loading = true
      markettList(this.queryParams).then((res) => {
        this.summaryList = res.data || []
        this.loading = false
      })
    },
    resetQuery() {
      this.recordDateRange = []
      this.resetForm('queryForm')
      this.queryParams = {}
      this.handleQuery()
    },
    handleQuery() {
      this.getList()
    }
  }
}
</script>

<style></style>
